<template>
    <div class="articleList-pages">
        <div class="articleList-page">
            <div class="wordbook-list">
                <van-list finished-text="没有更多了">
                    <van-cell
                        v-for="article in articleList"
                        :key="article.id"
                        class="wordbook-card"
                    >
                        <van-image
                            width="100"
                            height="100"
                            :src="article.img"
                            class="wordbook-cover"
                            fit="cover"
                        />
                        <div class="wordbook-name">
                            <div class="">{{ article.title }}</div>
                            <div>{{ article.description }}</div>
                        </div>
                    </van-cell>
                </van-list>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, defineEmits } from "vue";
import { downloadPdfFromBase64 } from "@/utils/pdf";
const emite = defineEmits(["clickChange"]);
const articleList = ref([
    {
        img: "",
        title: "jwijd",
        description: "djwoidjqwoidjwqoidjqwoijwqoidjwqiodjqwoij",
    },
]);

const reqs = ref({
    page: 1,
    limit: 10,
    params: {},
});

const testChange = (book) => {
    emite("clickChange", book.id);
};
</script>

<style scoped>
.articleList-page {
    padding: 10px;
}

.wordbook-list {
    margin-bottom: 16px;
}

.wordbook-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.wordbook-cover {
    flex-shrink: 0;
    width: 20%;
    border-radius: 10px;
    overflow: hidden;
}
.wordbook-cover img {
    width: 100%;
}
.wordbook-name {
    text-align: left;
    font-weight: bold;
    padding: 10px;
}

.card-actions {
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
}

.add-wordbook-btn {
    margin: 0 auto;
    display: block;
    width: 90%;
}

.add-wordbook-form {
    padding: 16px;
}
</style>

<style>
.wordbook-list .van-cell__value {
    display: flex;
    align-items: flex-start !important;
}
</style>
